<template>
  <view>
    <!-- 联系社区页面 -->
    <view class="title"></view>
    <!-- 市长热线 -->
    <view class="metro">
      <u-cell size="large" title="市长热线(眉山市)"></u-cell>
      <view class="message">
        <view class="img">
          <image  src="https://lupic.cdn.bcebos.com/20220722/3087281229_14_600_429.jpg" mode=""></image>
        </view>
        <view class="text">
          <p>眉山市</p>
          <p>全国市长热线：12345</p>
          <p>本市热线电话：028-369541</p>
        </view>
      </view>
    </view>
    
    <!-- 社区电话 -->
    <u-collapse>
      <u-collapse-item title="社区电话" name="noticeList" icon="phone-fill">
        
        <u-cell-group v-for="item in communityList" key="item.id">
         <u-cell title="社区电话">
            <view slot="title" class="u-slot-title tip">
              <view class="">
                <view class="banshichu">
                  <text>{{item.text}}</text>
                  <span>{{item.position}}</span>
                </view>
               <span class="phone">电话：{{item.phone}}</span>
              </view>
            </view>
          </u-cell>
        </u-cell-group>
      
        
      </u-collapse-item>
    </u-collapse>
    
    <!-- 当前社区地址 -->
    
  </view>
</template>

<script>
  export default {
    data() {
      return {
          communityList:[
            {
              id:1,
              text:'社区办公室主任',
              position:'红星社区',
              phone:'19965478952'
            },
            {
              id:2,
              text:'社区工作办事处',
              position:'红星社区',
              phone:'13456698741'
            },
            {
              id:3,
              text:'社区服务办事处',
              position:'红星社区',
              phone:'13456698546'
            }
          ]
      };
    }
  }
</script>

<style lang="scss">
  .title{
    height: 150px;
    width:100%;
    background: url("https://img.jwfzl.com.cn/storage/20210914/614012b84bde5.jpg") no-repeat;
    background-size: 100% 100%;
  }
.metro{
  .message{
     display: flex;
     height: 100px;
     border-bottom: 1px solid #eee;
    .img{
      margin-right: 5px;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      image{
        display: block;
        width: 70%;
        height: 70%;
      }
    }
    .text{
      flex: 2;
      p{
        margin: 5px 0;
        font-size: 16px;
      }
    }
  }
}
.banshichu{
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 900;
  span{
    font-weight: none;
    font-size: 12px;
    color: #c8c9cc;
  }
}
</style>